/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
// 准备查询参数对象
const queryObject = {
    status: '', // 文章状态: 1-待审核, 2-审核通过， 不传为全部
    channel_id: '', // 频道id，不传为全部
    page: '1', // 当前页码
    per_page: '2' // 每页条数
}
// 文章总条数
let totalCount = 0

async function setArticleList() {
    // 获取文章列表数据
    const result = await axios({url: '/v1_0/mp/articles', params: {...queryObject}})
    console.log(result)
    document.querySelector('.art-list').innerHTML = result.data.results.map(item => {
        return `
            <tr>
                <td>
                    <img src="${item.cover.type === 0 ? 'https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500' : item.cover.images[0]}" alt="">
                </td>
                <td>${item.title}</td>
                <td>
                    ${item.status === 1 ? '<span class="badge text-bg-primary">待审核</span>' : '<span class="badge text-bg-success">审核通过</span>'}
                </td>
                <td>
                    <span>${item.pubdate}</span>
                </td>
                <td>
                    <span>${item.read_count}</span>
                </td>
                <td>
                    <span>${item.comment_count}</span>
                </td>
                <td>
                    <span>${item.like_count}</span>
                </td>
                <td data-id="${item.id}">
                    <i class="bi bi-pencil-square edit"></i>
                    <i class="bi bi-trash3 del"></i>
                </td>
            </tr>
        `
    }).join('')
    // 设置文章总条数
    totalCount = result.data.total_count
    document.querySelector('.total-count').innerHTML = `共 ${totalCount} 条`
}

setArticleList()

/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 频道列表
async function setChannelList() {
    const result = await axios({url: '/v1_0/channels'})
    document.querySelector('.form-select').innerHTML = '<option value="" selected="">请选择文章频道</option>' + result.data.channels.map(item => {
        return `
            <option value="${item.id}">${item.name}</option>
        `
    })
}

setChannelList()

// 筛选数据
document.querySelector('.sel-btn').addEventListener('click', () => {
    const form = document.querySelector('.sel-form')
    const data = serialize(form, {hash: true, empty: true})
    Object.keys(data).forEach(key => {
        queryObject[key] = data[key]
    })
    setArticleList()
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
// 点击下一页
document.querySelector('.next').addEventListener('click', e => {
    // 点击下一页当前页码 + 1
    if (queryObject.page < Math.ceil(totalCount / queryObject.per_page)) {
        // 页码 + 1
        queryObject.page++
        document.querySelector('.page-now').innerHTML = `第 ${queryObject.page} 页`
        // 重新渲染数据
        setArticleList()
    }
})

// 点击上一页
document.querySelector('.last').addEventListener('click', e => {
    // 点击上一页当前页码 - 1
    if (queryObject.page > Math.ceil(totalCount / queryObject.per_page)) {
        // 页码 + 1
        queryObject.page--
        document.querySelector('.page-now').innerHTML = `第 ${queryObject.page} 页`
        // 重新渲染数据
        setArticleList()
    }
})
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
// 点击删除时获取文章id
document.querySelector('.art-list').addEventListener('click', async e => {
    // 判断点击的是不是删除元素
    if (e.target.classList.contains('del')) {
        const delId = e.target.parentNode.dataset.id
        // 调用删除接口
        const result = await axios({url: `/v1_0/mp/articles/${delId}`, method: 'DELETE'})

        // 删除最后一页左后一条时，向前翻页
        const children = document.querySelector('.art-list').children
        if (children.length === 1 && queryObject.page !== 1){
            // 页码 - 1
            queryObject.page--
            document.querySelector('.page-now').innerHTML = `第 ${queryObject.page} 页`
        }

        // 重新渲染数据
        await setArticleList()
    }
})

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', async e => {
    if (e.target.classList.contains('edit')){
        const editId = e.target.parentNode.dataset.id
        location.href = `../publish/index.html?id=${editId}`
    }
})
